<template>
  <template ref="headerRef">
    <header-ref
      @searchHandle="
        params.courseName = $event;
        $refs.tableRef.request(params);
      "
      @list-reset="$refs.tableRef.request(params)"
    />
  </template>
  <div class="course">
    <cus-condition
      :node-list="[
        { label: '年份', key: 'year' },
        { label: '学期', key: 'semesterId' },
        { label: '班型', key: 'courseTypeId' },
        { label: '年级', key: 'gradeId' },
      ]"
      @submit="params = { ...params, ...$event }"
      ref="condition"
    ></cus-condition>
    <cus-table :auto-request="false" :default="params" ref="tableRef" url="/course/queryByPageV2">
      <template #default>
        <el-table-column label="课程名称" property="courseName">
          <template #default="{ row }">
            <div class="course-name" @click="update(row)">
              <div class="img-box">
                <el-image
                  style="width: 70px; height: 70px"
                  :src="
                    row.imgPath
                      ? `${filePathBase}${row.imgPath}`
                      : courseCoverImage
                  "
                  fit="cover"
                />
              </div>
              <p>{{ row.courseName }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课次数" property="courseIndexNum" width="80">
          <template #default="{ row }">
            <span>{{ row.courseIndexNum }}讲</span>
          </template>
        </el-table-column>
        <el-table-column label="班型" property="courseTypeName" width="100"></el-table-column>
        <el-table-column label="年级" property="gradeName" width="100"></el-table-column>
        <el-table-column label="学期" property="semesterName" width="100"></el-table-column>
        <el-table-column label="年份" property="yearName" width="80"></el-table-column>
        <el-table-column label="发布状态" width="100">
          <template #default="{ row }">
            <cus-tag :status="row.status" success-text="已发布" error-text="未发布" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button v-if="!row.status" size="small" type="text" @click="update(row, 1)">修改课次</el-button>
            <el-divider v-if="!row.status" direction="vertical"></el-divider>
            <el-button size="small" type="text" @click="update(row, 2)">备课设置</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown size="medium" @command="handleCommand($event, row)">
              <el-button size="small" type="text">
                <span>
                  更多
                  <i class="el-icon-arrow-down" />
                </span>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="delete">删除</el-dropdown-item>
                  <el-dropdown-item command="release">
                    {{
                    row.status ? "取消发布" : "发布"
                    }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </template>
    </cus-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import headerRef from "./components/header-ref.vue";
import $, { emitter, screen } from "$";
import UpdateComponent from "./update/index.vue";
import courseCoverImage from "/src/assets/course.png";

export default defineComponent({
  components: { headerRef },
  setup() {
    const headerRef = ref(null);
    const tableRef: Ref<any> = ref(null);
    const condition: Ref<any> = ref(null);
    let params = ref<{ [key: string]: any }>({});
    onMounted(() => {
      emitter.emit("slot", headerRef);
      emitter.emit("effect", (id) => {
        params.value.subjectId = id;
        tableRef.value.request(params.value);
      });
    });

    const handleCommand = (type: "delete" | "release", data) => {
      type === "delete"
        ? __delete(data)
        : __release(data.id, Number(!data.status));
    };

    const __delete = async ({ id, status }) => {
      if (status) {
        ElMessage.warning("该课程已发布，请取消发布！");
        return;
      }
      await ElMessageBox.confirm(
        "该课程删除后，所有老师将无法对课程进行备授课；资料不会被删除。是否继续删除",
        "提示",
        {
          confirmButtonText: "删除",
          cancelButtonText: "暂不删除",
          type: "warning",
        }
      );
      let res = await $.http.post("/course/delete", { id });
      res.result && tableRef.value.request(params.value);
      ElMessage[res.result ? "success" : "warning"](
        res.result ? "删除课程成功！" : res.msg
      );
    };

    const __release = async (courseId, status) => {
      let res = await $.http.post("/course/changePublishStatus", {
        courseId,
        status,
      });
      res.result && tableRef.value.request(params.value);
      ElMessage[res.result ? "success" : "warning"](
        res.result ? `${status ? "发布成功~！" : "取消发布成功~！"}` : res.msg
      );
    };

    const update = async (data, currentIndex = 0) => {
      await screen
        .create(UpdateComponent, { data, currentIndex })
        .then(() => {
          tableRef.value.request(params.value);
        })
        .catch(() => {
          tableRef.value.request(params.value);
        });
    };

    let filePathBase = import.meta.env.VITE_APP_BASE_URL;

    return {
      headerRef,
      params,
      tableRef,
      condition,
      handleCommand,
      update,
      filePathBase,
      courseCoverImage,
    };
  },
});
</script>

<style lang="scss" scoped>
.course-name {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #72b22a;
  .img-box {
    margin-right: 15px;
    :deep(img) {
      border-radius: 10px;
    }
  }
}

.course .cus__table__container {
  padding: 15px 10px;
  :deep(thead) {
    color: #77808d;
  }
  :deep(tbody) {
    color: #333333;
  }
}
</style>
